package showcase

import "github.com/templui/templui/internal/components/button"
import "github.com/templui/templui/internal/components/icon"

templ ButtonSizes() {
	<div class="flex flex-wrap items-center gap-4">
		@button.Button(button.Props{
			Size:    button.SizeSm,
			Variant: button.VariantSecondary,
		}) {
			Small
		}
		@button.Button(button.Props{
			Variant: button.VariantSecondary,
		}) {
			Default
		}
		@button.Button(button.Props{
			Size:    button.SizeLg,
			Variant: button.VariantSecondary,
		}) {
			Large
		}
		@button.Button(button.Props{
			Size:    button.SizeIcon,
			Variant: button.VariantSecondary,
		}) {
			// Default icon size in @button is 16x16
			// Use Class: "size-6" for larger icons
			@icon.ChevronRight()
		}
	</div>
}
